﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="../jquery-easyui-1.4.3/jquery.min.js"></script>
    <script src="../jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <link href="../themes/default/easyui.css" rel="stylesheet" />
    <link href="../themes/icon.css" rel="stylesheet" />
    <style type="text/css">
        #font-family {
        font-size:15px;
        }
    </style>
</head>
<body>
    <div>
        <a id="btnAdd" href="#">新增</a>
        <a id="btnEdit" href="#">修改</a>
        <a id="btnDelete" href="#">删除</a>
        <a id="btnLoseAndLock" href="#">挂失/锁定</a>
        <a id="btnVIPTransferAccount" href="#">会员转账</a>
        <a id="btnChangeCard" href="#">会员换卡</a>
        <a id="btnOut" href="#">导出Excel</a>
        <a id="btnIn" href="#">导入Excel</a>
        <br />
        <div id="font-family">
            会员卡号：<input id="txtVipCardNumber" type="text" class="easyui-textbox" />
            会员姓名：<input id="txtVipName" type="text" class="easyui-textbox" />
            电话：<input id="txtVipTel" type="text" class="easyui-textbox"/>
            会员等级：<input id="Gride">
            状态：<input id="state">
            <a id="btnQuery" href="#">查询</a>
        </div>
        <!--1.从现有的表格元素创建DataGrid，在HTML中定义列、行和数据。-->
        <!--<table class="easyui-datagrid" style="text-align:center">
            <thead>
                <tr>
                    <th data-options="field:'code'">会员卡号</th>
                    <th data-options="field:'name'">会员姓名</th>
                    <th data-options="field:'price'">手机号码</th>
                    <th data-options="field:'price'">累计消费</th>
                    <th data-options="field:'price'">会员卡状态</th>
                    <th data-options="field:'price'">当前积分</th>
                    <th data-options="field:'price'">性别</th>
                    <th data-options="field:'price'">登记时间</th>
                    <th data-options="field:'price'">当前等级</th>

                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>001</td>
                    <td>name1</td>
                    <td>2323</td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>name2</td>
                    <td>4612</td>
                </tr>
            </tbody>
        </table>-->
        <!--2.通过<table>标签创建DataGrid控件。在表格内使用<th>标签定义列。-->
        <!--<table class="easyui-datagrid" style="width:400px;height:250px"
               data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
            <thead>
                <tr>
                    <th data-options="field:'code',width:100">编码</th>
                    <th data-options="field:'name',width:100">名称</th>
                    <th data-options="field:'price',width:100,align:'right'">价格</th>
                </tr>
            </thead>
        </table>-->
        <!--3.使用Javascript去创建DataGrid控件。-->
        <table id="dg"></table>
        <!--使用Javascript创建分页控件。-->
        <!--<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>-->
        <!--弹窗-->
        <div id="dlg" class="easyui-dialog" data-options="model:true,closed:true">
            <iframe id="frm" width="99%" height="98%" frameborder="0" scrolling="no"></iframe>
        </div>    
    </div>
    <script type="text/javascript">
        //新增
        $(function () {
            $('#btnAdd').linkbutton({
                iconCls: 'icon-add'
            });
        })
        //修改
        $(function () {
            $('#btnEdit').linkbutton({
                iconCls: 'icon-edit'
            });
        })
        //删除
        $(function () {
            $('#btnDelete').linkbutton({
                iconCls: 'icon-clear'
            });
        })
        //查询
        $(function () {
            $('#btnQuery').linkbutton({
                iconCls: 'icon-search'
            });
        })
        //挂失/锁定
        $(function () {
            $('#btnLoseAndLock').linkbutton({
                iconCls: 'icon-lock'
            });
        })
        //会员转账
        $(function () {
            $('#btnVIPTransferAccount').linkbutton({
                iconCls: 'icon-icon1'
            });
        })
        //会员换卡
        $(function () {
            $('#btnChangeCard').linkbutton({
                iconCls: 'icon-reload'
            });
        })
        //导出Excel
        $(function () {
            $('#btnOut').linkbutton({
                iconCls: 'icon-excel'
            });
        })
        //导入Excel
        $(function () {
            $('#btnIn').linkbutton({
                iconCls: 'icon-icon2 '
            });
        })

        //使用JS创建下拉列表
        $(function () {
            $('#Gride').combo({
                required: true,
                multiple: true
            });
        })
        $(function () {
            $('#state').combo({
                required: true,
                multiple: true
            });
        })
        //使用Javascript去创建DataGrid控件。
        $(function () {
            $('#dg').datagrid({
                fitColumns: true,// 如果为true,真正的自动展开/收缩列的大小，以适应网络的宽度，防止水平滚动
                //toolbar:"#tb",//toolbar:通过选择器指定的工具栏
                pagination: true, pagination: true,//则在DataGrid控件底部显示分页工具栏
                //fit:true,//当设置为true的时候面板大小将自适应父容器
                singleSelect: true,//如果为true，则只允许选择一行
                rownumbers: true,//如果为true，则显示一个行列号
                method: "get",
                url: '../jquery-easyui-1.4.3/demo/datagrid/datagrid_data1.json', //url：设置能够返回JSON数据的Action所对应的路径
                columns: [[
                { field: 'productid', title: '会员卡号', width: 100 },
                { field: 'productname', title: '会员姓名', width: 100 },
                { field: 'unitcost', title: '手机号码', width: 100 },
                { field: 'status', title: '累计消费', width: 100 },
                { field: 'listprice', title: '会员卡状态', width: 100 },
                { field: 'attr1', title: '当前积分', width: 100 },
                { field: 'itemid', title: '性别', width: 100 },
                { field: 'productname', title: '登记时间', width: 100 },
                { field: 'productname', title: '当前等级', width: 100 },

                ]]
            });
        })
        //使用Javascript创建分页控件。
        $(function () {
            $('#pp').pagination({
                total: 2000,
                pageSize: 10
            });
        })
        //"添加"按钮的弹窗
        $(function () {
            $("#btnAdd").click(function () {
                $("#dlg").dialog({ width: 600, height: 400, left: 400, top: 200 }).dialog("setTitle", "添加用户").dialog("open");//setTitle=添加用户
                $("#frm").attr("src", "VIPAdd.html");
            })
        })
        //"修改"按钮的弹窗（每次只能选择一行）
        $(function () {
            $("#btnEdit").click(function () {
                //var row = $("#dg").datagrid("getSelected");
                //if (row != null) {
                    $("#dlg").dialog({ width: 600, height: 400, left: 400, top: 200 }).dialog("setTitle", "修改会员信息").dialog("open");
                    $("#frm").attr("src", "VIPUpdate.html" + row.itemid);//itemid没有连接数据库
                //}
                //else {
                //    $.messager.alert("提示", "请选择需要编辑的行", "warning");
                //}
            })
        })
        //删除按钮
        //挂失锁定
        $(function () {
            $("#btnLoseAndLock").click(function () {
                //var row = $("#dg").datagrid("getSelected");
                //if (row != null) {
                    $("#dlg").dialog({ width: 300, height: 200,left:500,top:200 }).dialog("setTitle", "挂失/锁定").dialog("open");
                    $("#frm").attr("src", "VipLoseAndLock.html");//itemid没有连接数据库
                //}
                //else {
                //    $.messager.alert("提示", "请选择需要编辑的行", "warning");
                //}
            })
        })
       //会员转账btnVIPTransferAccount
        $(function () {
            $("#btnVIPTransferAccount").click(function () {
                //var row = $("#dg").datagrid("getSelected");
                //if (row != null) {
                $("#dlg").dialog({ width: 560, height: 400, left: 400, top: 200 }).dialog("setTitle", "会员转账").dialog("open");//setTitle=添加用户
                $("#frm").attr("src", "VipTransferAccount.html");
                //}
                //else {
                //    $.messager.alert("提示", "请选择需要编辑的行", "warning");
                //}
            })
        })
        //会员换卡
        $(function () {
            $("#btnChangeCard").click(function () {
                //var row = $("#dg").datagrid("getSelected");
                //if (row != null) {
                $("#dlg").dialog({ width: 350, height: 380, left: 500, top: 200 }).dialog("setTitle", "会员换卡").dialog("open");//setTitle=添加用户
                $("#frm").attr("src", "VipChangeCard.html");
                //}
                //else {
                //    $.messager.alert("提示", "请选择需要编辑的行", "warning");
                //}
            })
        })
        //搜索按钮
        $(function () {
            $("#btnQuery").click(function () {
                $("#dg").datagrid('load', {
                    productid: $('#txtVipCardNumber').val(),///////字段没有连接数据库
                    productname: $('#txtVipName').val(),
                    unitcost: $('#txtVipTel').val(),
                    productname: $('#Gride').val(),
                    listprice: $('#state').val()
                });
            });
        })
        
    </script>
</body>
</html>

